// 下拉框组件样式
.axiom-select {
  display: flex;
  flex-direction: column;
  gap: var(--axiom-select-gap);
  
  // By default, the component's width is determined by its content.
  // When 'block' prop is true, it expands to fill the parent container.
  &--block {
    width: 100%;
  }

  // Make the internal Element Plus component occupy the full width of its container.
  .el-select {
    width: 100%;
  }

  // 标签样式
  &__label {
    font-size: var(--axiom-select-label-font-size);
    font-weight: var(--axiom-select-label-weight);
    color: var(--text-color);
    font-family: var(--font-family-base);
    line-height: 1.4;
    
    // 必填标记
    .axiom-select__required {
      color: var(--danger-color);
      margin-left: var(--axiom-select-required-margin-left);
    }
  }

  // 下拉框字段样式
  &__field {
    .el-select__wrapper {
      background-color: var(--bg-color-secondary) !important;
      border: 1px solid var(--border-color) !important;
      border-radius: var(--border-radius-base) !important;
      box-shadow: none !important;
      transition: all 0.3s ease !important;
      padding: var(--axiom-select-field-padding) !important;
      position: relative !important;
      
      // 使用CSS变量支持动态主题切换
      background: var(--select-bg, var(--bg-color-secondary)) !important;
      border: 1px solid var(--select-border-color, var(--border-color)) !important;
      backdrop-filter: var(--select-backdrop-filter, none) !important;
      
      &::before {
        content: var(--select-before-content, none);
        position: absolute;
        top: -1px;
        left: -1px;
        right: -1px;
        bottom: -1px;
        background: var(--select-border-gradient, none);
        border-radius: inherit;
        z-index: -1;
        opacity: var(--select-border-opacity, 0);
        transition: opacity 0.3s ease;
      }
      
      &:hover {
        border-color: var(--primary-color-light) !important;
        
        &::before {
          opacity: var(--select-border-opacity-hover, 0);
        }
      }
      
      &:focus-within {
        border-color: var(--primary-color) !important;
        box-shadow: 0 0 0 2px var(--primary-color-light) !important;
        
        &::before {
          opacity: var(--select-border-opacity-focus, 0);
        }
      }
      
      .el-select__placeholder {
        color: var(--text-color-placeholder) !important;
        font-family: var(--font-family-base) !important;
      }
      
      .el-select__selected-item {
        color: var(--text-color) !important;
        font-family: var(--font-family-base) !important;
      }
      
      .el-select__suffix {
        color: var(--text-color-secondary) !important;
        
        .el-select__caret {
          color: var(--text-color-secondary) !important;
          transition: transform 0.3s ease !important;
        }
        
        .el-select__clear {
          color: var(--text-color-secondary) !important;
          
          &:hover {
            color: var(--danger-color) !important;
          }
        }
      }
      
      &.is-focus {
        .el-select__caret {
          transform: rotate(180deg) !important;
        }
      }
    }
    
    // 禁用状态
    &.is-disabled {
      .el-select__wrapper {
        background-color: var(--disabled-bg-color) !important;
        border-color: var(--disabled-border-color) !important;
        color: var(--disabled-text-color) !important;
        cursor: not-allowed !important;
        
        .el-select__placeholder,
        .el-select__selected-item {
          color: var(--disabled-text-color) !important;
        }
        
        .el-select__suffix {
          .el-select__caret,
          .el-select__clear {
            color: var(--disabled-text-color) !important;
          }
        }
      }
    }
    
    // 错误状态
    &.is-error {
      .el-select__wrapper {
        border-color: var(--danger-color) !important;
        
        &:hover,
        &:focus-within {
          border-color: var(--danger-color) !important;
          box-shadow: 0 0 0 2px var(--danger-color-light) !important;
        }
      }
    }
    
    // 成功状态
    &.is-success {
      .el-select__wrapper {
        border-color: var(--success-color) !important;
        
        &:hover,
        &:focus-within {
          border-color: var(--success-color) !important;
          box-shadow: 0 0 0 2px var(--success-color-light) !important;
        }
      }
    }
    
    // 多选模式
    &.is-multiple {
      .el-select__wrapper {
        min-height: var(--axiom-select-multiple-min-height) !important;
        padding: var(--axiom-select-multiple-padding) !important;
      }
    }
    
    // 多选标签样式
    .el-select__tags {
      .el-tag {
        background-color: var(--axiom-select-tag-bg) !important;
        border-color: var(--axiom-select-tag-border-color) !important;
        color: var(--axiom-select-tag-color) !important;
        border-radius: var(--axiom-select-tag-radius) !important;
        font-size: var(--axiom-select-tag-font-size) !important;
        
        .el-tag__close {
          color: var(--axiom-select-tag-color) !important;
          
          &:hover {
            background-color: var(--axiom-select-tag-close-hover-bg) !important;
            color: var(--axiom-select-tag-close-hover-color) !important;
          }
        }
      }
    }
  }

  // 错误信息样式
  &__error {
    font-size: var(--axiom-select-error-font-size);
    color: var(--danger-color);
    font-family: var(--font-family-base);
    line-height: 1.4;
    margin-top: var(--axiom-select-error-margin-top);
  }

  // 帮助文本样式
  &__help {
    font-size: var(--axiom-select-help-font-size);
    color: var(--text-color-secondary);
    font-family: var(--font-family-base);
    line-height: 1.4;
    margin-top: var(--axiom-select-help-margin-top);
  }
}


// 下拉面板样式（全局）
.el-select-dropdown {
  background-color: var(--bg-color-secondary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--border-radius-base) !important;
  box-shadow: var(--box-shadow-base) !important;
  backdrop-filter: blur(var(--backdrop-blur));
  -webkit-backdrop-filter: blur(var(--backdrop-blur));
  
  // 使用CSS变量支持动态主题切换
  background: var(--select-dropdown-bg, var(--bg-color-secondary)) !important;
  border: 1px solid var(--select-dropdown-border-color, var(--border-color)) !important;
  backdrop-filter: var(--select-dropdown-backdrop-filter, blur(var(--backdrop-blur))) !important;
  
  .el-select-dropdown__item {
    color: var(--text-color) !important;
    font-family: var(--font-family-base) !important;
    padding: var(--axiom-select-dropdown-item-padding) !important;
    transition: all 0.2s ease !important;
    
    &:hover {
      background-color: var(--axiom-select-dropdown-item-hover-bg) !important;
      color: var(--axiom-select-dropdown-item-hover-color) !important;
    }
    
    &.is-selected {
      background-color: var(--axiom-select-dropdown-item-selected-bg) !important;
      color: var(--axiom-select-dropdown-item-selected-color) !important;
      font-weight: var(--axiom-select-dropdown-item-selected-weight) !important;
      
      &:hover {
        background-color: var(--axiom-select-dropdown-item-selected-bg) !important;
        color: var(--axiom-select-dropdown-item-selected-color) !important;
      }
    }
    
    &.is-disabled {
      color: var(--disabled-text-color) !important;
      background-color: transparent !important;
      cursor: not-allowed !important;
    }
  }
  
  .el-select-dropdown__empty {
    color: var(--text-color-secondary) !important;
    font-family: var(--font-family-base) !important;
    padding: var(--axiom-select-dropdown-empty-padding) !important;
    text-align: center !important;
  }
  
  .el-popper__arrow {
    &::before {
      background-color: var(--bg-color-secondary) !important;
      border-color: var(--border-color) !important;
      
      // 使用CSS变量支持动态主题切换
      background: var(--select-dropdown-bg, var(--bg-color-secondary)) !important;
      border: 1px solid var(--select-dropdown-border-color, var(--border-color)) !important;
    }
  }
}

// 下拉动画
.el-select-dropdown {
  &.el-popper {
    .el-popper__arrow {
      &::before {
        border-color: transparent transparent var(--border-color) transparent !important;
      }
    }
  }
}

// 滚动条样式
.el-select-dropdown {
  .el-scrollbar {
    .el-scrollbar__wrap {
      .el-scrollbar__view {
        .el-select-dropdown__list {
          padding: 4px 0 !important;
        }
      }
    }
    
    .el-scrollbar__bar {
      &.is-vertical {
        .el-scrollbar__thumb {
          background-color: var(--scrollbar-thumb-color) !important;
          border-radius: var(--border-radius-base) !important;
          
          &:hover {
            background-color: var(--scrollbar-thumb-hover-color) !important;
          }
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .axiom-select {
    &__field {
      .el-select__wrapper {
        padding: 10px 12px !important;
        font-size: 16px !important; // 防止iOS缩放
      }
    }
  }
  
  .el-select-dropdown {
    .el-select-dropdown__item {
      padding: 12px !important;
      font-size: 16px !important;
    }
  }
}

// 动画效果
@keyframes selectFadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes selectFadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}

.el-select-dropdown {
  animation: selectFadeIn 0.2s ease-out;
  
  &.el-popper[data-popper-placement^="top"] {
    animation: selectFadeIn 0.2s ease-out;
  }
}

// Cyberpunk 主题专属样式
html.theme-cyberpunk {
  // Select 输入框
  .axiom-select__field {
    .el-select__wrapper {
      background: var(--glass-bg) !important;
      border: 1px solid var(--glass-border) !important;
      backdrop-filter: var(--backdrop-blur) !important;

      &:hover {
        border-color: var(--primary-color) !important;
      }
    }
    // 修正：统一使用 :focus-within 确保组件正确发光
    .el-select:focus-within .el-select__wrapper {
      border-color: var(--primary-color-hover) !important;
      box-shadow: var(--primary-glow) !important;
    }
  }

  // 下拉菜单面板
  .el-select-dropdown.el-popper {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    backdrop-filter: var(--backdrop-blur) !important;
    box-shadow: var(--secondary-glow) !important;

    .el-select-dropdown__item {
      &.is-selected {
        background-color: var(--primary-color) !important;
        color: var(--text-color-on-primary) !important;
        text-shadow: 0 0 5px var(--text-color-on-primary);
      }

      &:hover:not(.is-disabled) {
        background-color: var(--primary-color-hover) !important;
        color: var(--text-color) !important;
      }
    }
    .el-popper__arrow::before {
        background: var(--glass-bg) !important;
        border-color: var(--glass-border) !important;
    }
  }
}

html.theme-neon,
html.theme-rainbow-cyber {
  // Select 输入框
  .axiom-select__field {
    .el-select__wrapper {
      background: var(--glass-bg) !important;
      border: 1px solid var(--glass-border) !important;
      backdrop-filter: var(--backdrop-blur) !important;

      &:hover {
        border-color: var(--primary-color) !important;
      }
    }
    // 修正：统一使用 :focus-within 确保组件正确发光
    .el-select:focus-within .el-select__wrapper {
      border-color: var(--primary-color-hover) !important;
      box-shadow: var(--primary-glow) !important;
    }
  }

  // 下拉菜单面板
  .el-select-dropdown.el-popper {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    backdrop-filter: var(--backdrop-blur) !important;
    box-shadow: var(--secondary-glow) !important;

    .el-select-dropdown__item {
      &.is-selected {
        background-color: var(--primary-color) !important;
        color: var(--text-color-on-primary) !important;
        text-shadow: 0 0 5px var(--text-color-on-primary);
      }

      &:hover:not(.is-disabled) {
        background-color: var(--primary-color-hover) !important;
        color: var(--text-color) !important;
      }
    }
    .el-popper__arrow::before {
        background: var(--glass-bg) !important;
        border-color: var(--glass-border) !important;
    }
  }
}